<template>
  <view class="relation-page" style="padding-top: 160rpx;">
    <up-navbar @rightClick="rightClick" :autoBack="true" bg-color="#f9f9f9">
      <template #center>
        <view class="u-nav-slot">
          <up-sticky bgColor="#f9f9f9">
            <up-tabs
                v-if="tabsReady"
                :list="tabs"
                :scrollable="false"
                :current="activeTab"
                @change="handleTabChange"
                :line-width="40"
                :line-height="5"
                lineColor="#95EC69"
                lineWidth="18"
                lineHeight="2"
                :activeStyle="{
                    color: '#95EC69',
                    fontWeight: 'bold',
                    transform: 'scale(1.05)'
                }"
                :inactiveStyle="{
                    color: '#606266',
                    transform: 'scale(1)'
                }"
                :height="80"
            ></up-tabs>
          </up-sticky>
        </view>
      </template>
    </up-navbar>

    <view class="list-container">
      <!-- 加载中状态 -->
      <view v-if="!tabsReady" class="loading-container">
        <u-loading-icon mode="flower" color="#36BFFA" size="40"/>
        <text class="loading-text">加载中...</text>
      </view>

      <!-- 互关列表 -->
      <view v-else-if="activeTab === 0">
        <UserMutualList :userId="userId" @refresh="refreshList"/>
      </view>

      <!-- 关注列表 -->
      <view v-else-if="activeTab === 1">
        <UserFollowList :userId="userId" @refresh="refreshList"/>
      </view>

      <!-- 粉丝列表 -->
      <view v-else-if="activeTab === 2">
        <UserFanList :userId="userId" @refresh="refreshList"/>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted, nextTick} from 'vue';
import {onLoad} from '@dcloudio/uni-app';
import UserMutualList from '@/components/UserMutualList/UserMutualList.vue';
import UserFollowList from '@/components/UserFollowList/UserFollowList.vue';
import UserFanList from '@/components/UserFanList/UserFanList.vue';

const activeTab = ref(0);
const tabs = ref([]);
const tabsReady = ref(false);
const userId = ref('');

onLoad((options) => {
  if (options.activeTab) {
    activeTab.value = parseInt(options.activeTab);
  }
})

onMounted(() => {
  // 获取当前用户ID
  userId.value = uni.getStorageSync('userInfo').userId;

  // 初始化tabs数据
  tabs.value = [
    {name: '互关'},
    {name: '关注'},
    {name: '粉丝'}
  ];

  // 延迟初始化，确保DOM渲染完成
  nextTick(() => {
    tabsReady.value = true;
  });
});

const handleTabChange = (tabItem) => {
  // 从 tabItem 对象中提取 index 属性
  const index = tabItem.index;
  if (typeof index === 'number') {
    activeTab.value = index;
  } else {
    console.error('handleTabChange 接收到的 index 不是 number 类型:', index);
  }
};

const refreshList = () => {
  console.log(`刷新列表: ${tabs.value[activeTab.value].name}`);
};

const rightClick = () => {
  uni.showActionSheet({
    itemList: ['按时间排序', '按粉丝数排序', '按活跃度排序'],
    success: (res) => {
      console.log(`选择了: ${['按时间排序', '按粉丝数排序', '按活跃度排序'][res.tapIndex]}`);
    }
  });
};
</script>

<style lang="scss" scoped>
.relation-page {
  height: 100vh;
  background-color: #f7f7f7;
}

.list-container {
  padding: 10rpx;
  min-height: calc(100vh - 120rpx);
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200rpx;
}

.loading-text {
  margin-top: 15rpx;
  color: #999;
  font-size: 26rpx;
}
</style>